<template>
  <div>
    这是App.vue

    <!-- <router-link replace to="/reg" style="margin: 10px;">reg</router-link>
    <router-link replace to="/">login</router-link> -->

    <!-- <router-link :to="{name:'Login'}" style="margin: 10px;">reg</router-link>
    <router-link :to="{name:'Reg'}">login</router-link> -->

    <!-- <a href="/reg" style="margin: 20px;">Reg</a>
    <a href="/">login</a> -->

    <button @click="toPage('Reg')">Reg</button>
    <button @click="toPage('Login')">Login</button>

    <!-- <button @click="next()">next</button>
    <button @click="prev()">prev</button> -->
    <hr>
    <router-view></router-view>
  </div>

</template>
<script setup lang="ts">
import Reg from './components/reg.vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const toPage = (url: string) => {
  // router.push(url) 字符串跳转
  // router.push({
  //   path:url  对象跳转
  // })
  router.push({
    name:url // 命名跳转
  })
  // router.replace({
  //   name: url // 不留历史记录，push改为replace
  // })

}

const next = ()=>{
  router.go(1) //下一页
}

const prev = ()=>{
  router.back() //上一页
}


</script>
<style lang="less">
</style>